<template>
    <div class="header">
        <span class="logo"><router-link to="/" style="text-decoration:none;color:inherit">词境星云</router-link></span>
      <div style="flex: 1"></div>
      <div class="header-icons">
        <el-button type="primary" size="small" @click="showQrCode">访问公众号</el-button>
        <!-- <el-badge :value="2" class="chat-badge" type="danger">
          <el-button icon="el-icon-chat-dot-round" circle @click="toChat"></el-button>
        </el-badge> -->
      </div>
        <div class="drop-items">
          <el-dropdown>
             <div class="user-image" type="border-card" style="" >
                <el-avatar
                :src="url"
                shape="circle"
                size="60"
                 ></el-avatar>
            </div>
                <span class="el-dropdown-link">
                     <i class="el-icon-caret-bottom"></i>
                </span>
            <template #dropdown>
              <el-dropdown-menu style="" >
                <el-dropdown-item @click="toSettings" divided style="font-family: PingFang;letter-spacing: 1px">个人设置</el-dropdown-item>
                <el-dropdown-item @click="toChat" divided style="font-family: PingFang;letter-spacing: 1px">聊天讨论</el-dropdown-item>
                <el-dropdown-item @click="exit" divided style="font-family: PingFang;letter-spacing: 1px">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
    </div>    <!-- 二维码弹窗 -->
    <el-dialog
      title="微信公众号"
      v-model:modelValue="dialogVisible"
      :width="'30%'"
      :modal="true"
      :append-to-body="true"
      :close-on-click-modal="true"
      :close-on-press-escape="true"
      center="true"
    >
      <div class="qrcode-container">
        <div v-if="qrcodeUrl" class="qrcode-image">
          <img :src="qrcodeUrl" alt="微信二维码">
        </div>
        <div v-else class="loading">
          <i class="el-icon-loading"></i>
          <p>加载中...</p>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<script>
import request from "../utils/request";
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default {
    name: 'Header',
    props: {
      url:String,
    },    
    data() {
      return {
        dialogVisible: false,
        qrcodeUrl: ''
      }
    },
    watch: {
      dialogVisible(newVal) {
        console.log('对话框可见性变化:', newVal);
      }
    },
    methods:{
        exit(){
            this.$router.push("/login")
        },
        toSettings(){
          this.$router.push('/settings')
        },        toChat(){
          this.$router.push('/chat')
        },
        showQrCode() {
          console.log('显示二维码按钮被点击');
          this.dialogVisible = true;
          console.log('对话框可见性已设置为:', this.dialogVisible);
          this.getQrCode();
        },
        getQrCode() {
          console.log('开始获取二维码');
          this.qrcodeUrl = '';
            // 使用配置好的代理
          request.get("/weixin/portal/qrcode_ticket")
            .then(res => {
              console.log('获取二维码成功:', res);
              if (res && res.data) {
                this.qrcodeUrl = res.data; // 直接使用返回的完整URL
              } else {
                ElMessage.error('获取二维码失败');
                // 显示一个示例二维码作为后备
                this.qrcodeUrl = "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=example_ticket";
              }
            }).catch(err => {
              console.error('获取二维码错误:', err);              // 如果服务器不可用，可以显示一个默认二维码
              ElMessage({
                message: '无法连接到服务器，显示示例二维码',
                type: 'warning'
              });
              // 这里使用一个示例二维码URL
              this.qrcodeUrl = "https://example.com/qrcode.png"; // 使用一个示例图片URL
            });
        }
    }
}
</script>

<style scoped>
    .header {
        display:flex;
        height: 50px;
        background-color: #fff;
        align-items: center;
    }

    .logo {
        font-size:28px;
        color: #5CAC44;
        align-self: center;
        padding:20px 20px;
    }

    .drop-items{
      align-self: center;
      padding:20px 20px;
      font-size:20px;
    }
    
    .header-icons {
      margin-right: 15px;
      display: flex;
      align-items: center;
    }
    
    .chat-badge {
      margin-right: 10px;
      margin-left: 10px;
    }
    
    .qrcode-container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 200px;
    }
    
    .qrcode-image img {
      max-width: 100%;
      height: auto;
    }
    
    .loading {
      text-align: center;
    }
</style>